<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/webpage/include/taglib.jsp"%>
<html>
<head>
	<title>Sku</title>
	<script type="text/javascript" src="${ctxStatic}/plugin/select/jquery.combo.select.js"></script>
    <script type="text/javascript" src="${ctxStatic}/plugin/select/combo.select.css"></script>
    <style>
        /**
 * Variables
 */
        /**
         * Wrapper
         */
        .combo-select {
            position: relative;
            max-width: 400px;
            margin-bottom: 15px;
            font: 100% Helvetica, Arial, Sans-serif;
            border: 1px #ccc solid;
            border-radius: 3px; }
        .combo-select .combo-input {
            margin-bottom: 0; }

        /**
         * Input field
         */
        .combo-input {
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            margin: 0;
            text-overflow: ellipsis;
            white-space: nowrap;
            border: none;
            width: 100%;
            box-sizing: border-box;
            padding: 12px;
            padding-right: 60px;
            border-radius: 3px; }
        .combo-input:focus {
            outline: none; }

        /**
         * Arrow
         */
        .combo-arrow {
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            cursor: pointer;
            text-align: center;
            font-size: 14px;
            width: 40px;
            font-size: 12px;
            color: #999999; }
        .combo-arrow:before {
            content: " ";
            border-left: 5px solid transparent;
            border-right: 5px solid transparent;
            border-top: 5px solid #cccccc;
            display: block;
            width: 0;
            height: 0;
            top: 0;
            right: 15px;
            bottom: 0;
            position: absolute;
            margin: auto 0; }

        /**
         * When opened
         */
        .combo-open .combo-arrow {
            border-color: #51A7E8; }
        .combo-open .combo-arrow:before {
            border-top: none;
            border-bottom: 5px solid #cccccc; }

        /**
         * When focused
         */
        .combo-focus {
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
            border-color: #51A7E8; }
        .combo-focus input {
            border-color: #51A7E8; }

        /**
         * Hide native select
         */
        .combo-select select {
            position: absolute;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            -webkit-appearance: none;
            opacity: 0; }

        @media only screen and (min-width: 960px) {
            .combo-select select {
                left: -1px;
                top: -1px;
                width: 0;
                height: 0;
                margin: 0; } }
        /**
         * Selected option
         */
        .option-selected {
            background-color: #eee; }

        /**
         * Hovered option
         */
        .option-hover {
            background-color: #006eab;
            color: #fff; }

        /**
         * Option item
         */
        .option-item {
            cursor: pointer;
            border-bottom: 1px #e3e3e3 solid; }
        .option-item:hover {
            background-color: #006eab;
            color: #fff; }
        .option-item:last-child {
            border-bottom: none; }

        /**
         * Disabled and optgroups
         */
        .option-group {
            cursor: text;
            font-weight: 600;
            background: #e1e1e1;
            border: 1px #ccc solid;
            border-width: 1px 0; }

        /**
         * Disabled
         */
        .option-disabled {
            opacity: 0.5; }

        /**
         * Dropdown
         */
        .combo-dropdown {
            position: absolute;
            z-index: 1;
            top: 100%;
            left: 0;
            min-width: 100%;
            max-width: 300px;
            max-height: 300px;
            margin: 0;
            padding: 0;
            display: none;
            overflow-y: auto;
            background: #fff;
            border: 1px solid #999999;
            border-radius: 0;
            box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
            box-sizing: border-box; }
        .combo-dropdown li {
            list-style: none;
            padding: 8px 1em;
            margin: 0; }

        /**
         * On Active
         */
        .combo-open .combo-dropdown {
            display: block; }

        /**
         * Search marker
         */
        .combo-marker {
            text-decoration: underline; }

    </style>
	<meta name="decorator" content="ani"/>
	<script type="text/javascript">

		$(document).ready(function() {
			$("#inputForm").validate({
				submitHandler: function(form){

                    $.ajax({
                        url:"${ctx}/sku/sku/save",
                        type:"post",
                        data:$('#inputForm').serialize(),
                        //contentType: "application/json",
                        beforeSend: function () {
                            // 禁用按钮防止重复提交
                            $("#submit").attr({ disabled: "disabled" });
                        },
                        success:function(data){
                            if(data.code=='0'){
                                jp.info(data.message);
                                window.location.href="${ctx}/sku/sku/list";
                            }
                            else{
                                jp.warning(data.message);
                            }
                        },
                        complete: function () {
                            $("#submit").removeAttr("disabled");
                        },
                    });

				},
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")||element.parent().is(".input-append")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				}
			});
			
		});
	</script>
	<script>
        $(function() {
            $('select').comboSelect();
        });
	</script>
</head>
<body>
<div class="wrapper wrapper-content">				
<div class="row">
	<div class="col-md-12">
	<div class="panel panel-primary">
		<div class="panel-heading">
			<h3 class="panel-title"> 
				<a class="panelButton" href="${ctx}/sku/sku"><i class="ti-angle-left"></i> 返回</a>
			</h3>
		</div>
		<div class="panel-body">
		<form:form id="inputForm" modelAttribute="sku" action="${ctx}/sku/sku/save" method="post" class="form-horizontal">
		<form:hidden path="id"/>
			<sys:message content="${message}"/>
	<%--		<div class="form-group">
				<label class="col-sm-2 control-label">供应商：</label>
				<div class="col-sm-10">
					<form:select path="supplierId" class="form-control ">
						<c:forEach items="${supplierList}" var="it">
							<form:option value="${it.id}" label="${it.supplierName}"/>
						</c:forEach>
					</form:select>

				</div>
			</div>--%>

			<div class="form-group">
					<label class="col-sm-2 control-label">产品名称：</label>
					<div class="col-sm-10">
						<form:input path="productName" id="productName" htmlEscape="false" maxlength="64"  minlength="1"    class="form-control  required"/>
					</div>
				</div>
			<div class="form-group">
				<label class="col-sm-2 control-label">单位：</label>
				<div class="col-sm-10">
					<form:select  path="pUnit" class="form-control  required">
						<form:option value="" label="请选择"/>
						<form:options items="${fns:getDictList('sc_sku_unit')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
					</form:select>
				</div>
			</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">一级类目：</label>
					<div class="col-sm-10">
						<form:select path="categoryA" class="form-control  required">
							<form:option value="" label="请选择"/>
							<form:options items="${fns:getDictList('sc_category_a')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">二级类目：</label>
					<div class="col-sm-10">
						<form:select path="categoryB" class="form-control  required">
							<form:option value="" label="请选择"/>
							<form:options items="${fns:getDictList('sc_category_b')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>
					</div>
				</div>
				<div class="form-group">
					<label class="col-sm-2 control-label">三级类目：</label>
					<div class="col-sm-10">
						<form:select path="categoryC" class="form-control  required">
							<form:option value="" label="请选择"/>
							<form:options items="${fns:getDictList('sc_category_c')}" itemLabel="label" itemValue="value" htmlEscape="false"/>
						</form:select>
					</div>
				</div>

			<div class="form-group">
				<label class="col-sm-2 control-label">备注信息：</label>
				<div class="col-sm-10">
					<form:textarea path="remarks" htmlEscape="false" rows="4" class="form-control  "/>
				</div>
			</div>
		<c:if test="${fns:hasPermission('sku:sku:edit') || isAdd}">
				<div class="col-lg-3"></div>
		        <div class="col-lg-6">
		             <div class="form-group text-center">
		                 <div>
		                     <button class="btn btn-primary btn-block btn-lg btn-parsley" data-loading-text="正在提交...">提 交</button>
		                 </div>
		             </div>
		        </div>
		</c:if>
		</form:form>
		</div>				
	</div>
	</div>
</div>
</div>
</body>
</html>